<template>
  <div class="community-detail-box">
    <scrollMore :showMoreTitle="false" :noMore="true">
      <div class="community-detail-content-box flex">
        <div class="community-detail-content">
          <commentItem
            v-if="postsData"
            ref="commentItemRef"
            :postsDetail="postsData"
            :commentIndex="0"
            @updateItem="getPostsDetail"
            @videoPlay="videoIsPlay = true"
            @videoEndPlay="videoIsPlay = false"
            :videoIsPlay="videoIsPlay"
          ></commentItem>
          <comment :postsDetail="postsData" v-if="postsData"></comment>
        </div>
        <div class="community-detail-right">
          <communityRight :user="true" :ercode="true" class="community-detail-right-content"></communityRight>
        </div>
      </div>
    </scrollMore>
  </div>
</template>
<script>
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import {
  defineComponent,
  reactive,
  toRefs,
  onUnmounted,
  onMounted,
  computed,
  getCurrentInstance,
} from "vue";
import communityRight from "../communityHome/communityRight.vue";
import comment from "@/components/comment.vue";
import commentItem from "@/components/commentItem.vue";
import { postsDetail } from "@/axios/community.js";
import scrollMore from "@/components/scrollMore.vue";
import {ElMessage} from "element-plus"
export default defineComponent({
  components: {
    communityRight,
    comment,
    commentItem,
    scrollMore,
  },
  setup(props, { attrs, slots, emit }) {
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    const store = useStore();

    let data = reactive({
      postsData: "", //帖子详情
      videoIsPlay: false, //视频是否在播放
      id: "", //帖子id
    });


    // 获取帖子详情
    let getPostsDetail = () => {
      postsDetail({
        id: data.id,
      }).then((res) => {
        data.postsData = res.data[0];
        proxy.$nextTick(() => {
          data.postsData.showComment = true;
        });
      });
    };

    onMounted(() => {
      if(!store.state.minUserInfo) {
        router.push("/");
        ElMessage.warning("请登录")
        return
      }



      data.id = router.currentRoute.value.query.id; //获取地址栏帖子id
      getPostsDetail();
    });

    return {
      getPostsDetail,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.community-detail-box {
  background: #f9f9f9;
  height: 100%;
}

.community-detail-content-box {
  max-width: 1360px;
  min-width: 1110px;
  margin: 0 auto;
  // width: 100%;
}

.community-detail-content {
  flex: 1;
  background: #fff;
  margin-right: 10px;
  margin-top: 10px;
  border-radius: 10px;
}

.community-detail-right{
  position: relative;
}
.community-detail-right-content{
  position: sticky;
  top: 10px;
}
</style>
